/* SPDX-License-Identifier: Apache-2.0 */

/*
  A form field, with label, input, and help text.

  <div class="gravatar-form">
    <img class="gravatar-form__image"/>
    <div class="gravatar-form__content">
      content here
    </div>
  </div>
*/

.gravatar-form {
  display: flex;
  align-items: center;

  &__image {
    margin-right: $half-spacing-unit;
  }

  &__content {
    max-width: 500px;
  }

  @media screen and (max-width: $small-tablet) {
    align-items: start;

    &__image {
      max-width: 90px;
    }
  }

  @media screen and (max-width: $mobile) {
    display: block;

    &__image {
      margin-right: 0;
    }

    &__content {
      max-width: 100%;
      margin-top: 15px;
    }
  }
}
